<template>
  <view class="u-demo-block">
    <!-- 标题 -->
    <div style="margin: 35rpx 40rpx 50rpx 20rpx">
      <view class="mall-pintuan-head">
        <text>热门话题</text>
        <view>
          <text>查看更多</text>
          <image src="../../static/img/arrow_gray.png"></image>
        </view>
      </view>
    </div>
    <div class="line-margin-LR"></div>
    <!-- 轮播图 -->
    <u-swiper :list="list" previousMargin="30" nextMargin="30" circular :autoplay="true" radius="5"
              bgColor="#ffffff"></u-swiper>
    <!-- 间隔 -->
    <u-gap height="10px" bgColor="#ececec" marginTop="20px" marginBottom="15px"></u-gap>
    <!-- 标题 -->
    <div style="margin: 0px 40rpx 35rpx 20rpx">
      <view class="mall-pintuan-head">
        <text>社区互动</text>
        <view>
          <text @click="jumpDetailed">查看更多</text>
          <image src="../../static/img/arrow_gray.png"></image>
        </view>
      </view>
    </div>
    <!-- 线条 -->
    <u-line></u-line>
    <!-- 聊天区   -->
    <div v-for="(comApp, index) in commentsAppExternal" :key="index">
      <div class="container">
        <div class="column avatar">
          <!-- 这里放置头像 -->
          <u-avatar :src="comApp.zyOwner.ownerPortrait" size="50" shape="circle"></u-avatar>
        </div>
        <div class="column1">
          <span class="column1-name-span">{{ comApp.zyOwner.ownerNickname }}</span>
          <div class="contentText">
            <span>{{ comApp.content }}</span>
            <!-- 显示多张图片 -->
            <div style="margin-top: 10rpx;">
              <u-grid :col="3">
                <u-grid-item v-for="(image, imgIndex) in comApp.someImages" :key="imgIndex">
                  <div class="image-container">
                    <img :src="image" alt="被分享的图片" @click="clickImg(comApp.someImages, imgIndex)" :class="{ zoomed: isZoomed }"
                         style="width: 170rpx; height: 170rpx;">
                  </div>
                </u-grid-item>
              </u-grid>
            </div>
          </div>
        </div>
      </div>
      <div style="margin: 0 30rpx 30rpx 50rpx">
        <span style="font-size: 30rpx ;color: #6d6d72">{{ comApp.createTime }}</span>
      </div>
      <u-line color="#8f8f94" />
    </div>
    <!-- 间隔 -->
    <u-gap height="10px" bgColor="#ececec" marginTop="20px" marginBottom="15px"></u-gap>
    <div style="width: 700rpx ; margin: auto">
      <u-button type="primary" :hairline="true" text="参加互动" icon="file-text" color="#2B81FD"></u-button>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        'https://cdn.uviewui.com/uview/swiper/swiper3.png',
        'https://cdn.uviewui.com/uview/swiper/swiper2.png',
        'https://cdn.uviewui.com/uview/swiper/swiper1.png',
      ],
      commentsAppExternal: [], // 外部大致内容
      isZoomed: false,
    };
  },
  methods: {
    /*部分记录显示*/
    commentsPage() {
      this.$http.post('/uni-app/zyCommunityInteraction').then((result) => {
        result.data.data.forEach((item) => {
          if (item.content.length > 36) {
            item.content = item.content.substring(0, 28) + '……';
          }
          const images = item.images.split(',');
          const someImages = images.map((image) => {
            return image.trim();
          });

          item.someImages = someImages;
        });
        const rev = result.data.data.reverse()

        console.log('rev', rev)
        rev.sort((a, b) => {
          const dateA = new Date(a.createTime.replace(/-/g, "/")).getTime();
          const dateB = new Date(b.createTime.replace(/-/g, "/")).getTime();
          return dateB - dateA;
        });

        this.commentsAppExternal = rev.slice(0, 5);

        console.log('Comment22', this.commentsAppExternal)
      });
    },
    /*图片显示与否*/
    clickImg(images, index) {
      wx.previewImage({
        urls: images, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
        current: images[index], // 当前显示图片的http链接，默认是第一个
        success: function (res) {},
        fail: function (res) {},
        complete: function (res) {},
      });
    },
    /*获取images中的image*/
    oneImages(images, index) {
      this.commentsAppExternal[index].someImages = images.split(',').map((image) => {
        return image.trim();
      });
    },
    /*跳转详细*/
    jumpDetailed() {
      uni.navigateTo({
        url: '/pages/community/CommunityDetailedView', // 跳转的页面路径
      });
    },
  },
  mounted() {
    this.commentsPage();
  },
};
</script>

<style lang="scss" scoped>
.mall-pintuan-head > view image {
  width: 12rpx;
  height: 20rpx;
  margin-left: 12rpx;
}
/**/

.contentText {
  flex: 1;
  padding-top: 30rpx
}

	.line-margin-LR {
		margin: 10px 0px;
	}
	.text-remen {
		margin: 10px 0px 0px 20px ;
	}
	.text-gengduo{
		color: #d8d8d8;
		text-align: right;
	}


	.mall-pintuan-head {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.mall-pintuan-head>text {
		font-size: 34rpx;
		color: #333;
		font-weight: 600;
	}

	.mall-pintuan-head>view {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.mall-pintuan-head>view text {
		font-size: 24rpx;
		color: #999;
	}

  /*评论样式*/
	.mall-pintuan-head>view image {
		width: 12rpx;
		height: 20rpx;
		margin-left: 12rpx;
	}

.container {
  margin: 10px 10px;
  //height: 130rpx;
  display: flex;
}

.column {
  flex: 2;
  flex-direction: column;
}
.column1 {
  flex: 9;
  flex-direction: column;
}

.column1-name-span {
  color: #173294;
  font-size: 32rpx;
  font-weight: bold;
}
.avatar {
  height: 130rpx;
  width: 45rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  margin-right: 30rpx;
}
/*图片*/
  .image-container {
    position: relative;
  }

  img {
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    width: 120rpx;
    height: 120rpx;
  }

  .zoomed {
    transform: scale(2);
  }
  /*显示多张图片*/
.grid-text {
  font-size: 35rpx;
  margin-top: 4rpx;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

</style>
